<template>

  <div class="areaCard" v-if="show">
    <a-row :gutter="24">
      <div class="tj-title">
        <h2>地区分布</h2>
        <div class="search">
          <a-select defaultValue="activeUsers" :value="userType" style="width: 120px" @change="handleType">
            <a-select-option value="activeUsers">活跃用户数</a-select-option>
            <a-select-option value="newUser">新增用户数</a-select-option>
          </a-select>
          <a-select defaultValue="1" :value="time" style="width: 120px;margin-left: 10px;" @change="handleTime">
            <a-select-option value="0">昨天</a-select-option>
            <a-select-option value="1">最近7天</a-select-option>
            <a-select-option value="2">最近30天</a-select-option>
          </a-select>
          <span style="margin-left: 10px; ">{{startTime}} - {{endTime}}</span>
        </div>
      </div>
    </a-row>
    <a-row :gutter="24">
      <a-col :sm="24" :md="24" :xl="12" class="sex">
        <ve-map :data="chartData" :settings="chartSettings"></ve-map>
      </a-col>
      <a-col :sm="24" :md="24" :xl="12" class="age">
        <v-chart :forceFit="true" :height="height" :data="lineData">
          <v-coord type="rect" direction="LB"/>
          <v-tooltip/>
          <v-axis dataKey="country" :label="label"/>
          <v-bar position="city*number"/>
        </v-chart>
      </a-col>
    </a-row>
  </div>

</template>

<script>
  import { getUserPortrait } from '../../api/dashboard/chart'
  import moment from 'moment'

  // const DataSet = require('@antv/data-set')
  //
  // const sourceData = [
  //   { city: '重庆', number: 131744 },
  //   { city: '上海', number: 104970 },
  //   { city: '北京', number: 29034 },
  // ]
  //
  // const dv = new DataSet.View().source(sourceData)
  // dv.transform({
  //   type: 'sort',
  //   callback(a, b) {
  //     return a.population - b.population > 0
  //   }
  // })
  // const data = dv.rows

  const label = { offset: 12 }
  export default {
    data() {
      this.chartSettings = {
        position: 'china',
        label: false,
        itemStyle: {
          normal: {
            borderWidth: 1,
            borderColor: '#e7f8ff',
            areaColor: '#3aa1ff'
          }
        },
        zoom: 1.2,
        aspectScale: 0.7
      }
      return {
        show: false,
        startTime: '',
        endTime: '',
        userType: 'activeUsers',
        time: '1',

        lineData: [],


        // data,
        height: 500,
        label: label,


        chartData: {
          columns: ['位置', '用户'],
          rows: []
          // rows: [
          //   { '位置': '重庆', '用户': 123 },
          //   { '位置': '北京', '用户': 1223 },
          //   { '位置': '上海', '用户': 2123 },
          //   { '位置': '浙江', '用户': 4123 }
          // ]
        }
      }
    },
    props: ['companyid'],
    created() {
      this.getAllMerchant('1', 'activeUsers')
    },
    methods: {

      handleType(value) {
        this.userType = value
        this.getAllMerchant(this.time, value)
      },
      handleTime(value) {
        this.time = value
        this.getAllMerchant(value, this.userType)

      },
      getAllMerchant: function(time, type, companyid) {

        //传两个参数过来
        // time
        // type 判断取什么值 visitUvNew / visitUv
        let myTime = new Date()
        //昨天
        const yesterday = moment(myTime).add(-1, 'd').format('YYYY年MM月DD日')
        //7天
        const week = moment(myTime).add(-1, 'w').format('YYYY年MM月DD日')
        //30天
        const month = moment(myTime).add(-1, 'M').format('YYYY年MM月DD日')

        if (time == '0') {
          this.startTime = yesterday
          this.endTime = yesterday
        } else if (time == '1') {
          this.startTime = week
          this.endTime = yesterday
        } else if (time == '2') {
          this.startTime = month
          this.endTime = yesterday
        }
        const body = {
          type: time,
          companyid: companyid!=null?companyid:this.companyid
        }
        console.log('areaMap')
        console.log(body)
        // 取值城市

        const DataSet = require('@antv/data-set')
        getUserPortrait(body).then(res => {
          if (res.code === 200) {

            this.show = true

            let mapData = []
            let lineData = []
            if (type == 'activeUsers') {//活跃用户
              //网络数据
              let obj = res.result.visitUv.city
              for (let i in obj) {
                if (obj[i] != 0) {
                  mapData.push({
                    '位置': i,
                    '用户': obj[i]
                  })

                  lineData.push({
                    'city': i,
                    'number': obj[i]
                  })
                }
              }


              //我是分割线 地图数据源上


            } else {// 新增用户

              //网络数据
              let obj = res.result.visitUvNew.city
              for (let i in obj) {
                if (obj[i] != 0) {
                  mapData.push({
                    '位置': i,
                    '用户': obj[i]
                  })
                  lineData.push({
                    'city': i,
                    'number': obj[i]
                  })
                }
              }

              //我是分割线 条形图数据源下


            }

            const DataSet = require('@antv/data-set')

            const dv = new DataSet.View().source(lineData)
            dv.transform({
              type: 'sort',
              callback(a, b) {
                return a.population - b.population > 0
              }
            })


            this.lineData = dv.rows.slice(0, 10)


            this.chartData.rows = mapData


          } else {

            this.show = false

            this.$notification.error({
              message: '错误',
              description: res.message,
              duration: 4
            })
          }
        })
      }
    }

  }
</script>

<style scoped lang="less">

  .areaCard {
    .tj-title {
      width: 100%;
      padding: 0 20px;

      h2 {
        line-height: 60px;
      }
    }
  }
</style>